<template>
	<div class="content">
		<div class="refresh" @click="refresh">版本号：{{ version }} <br> SN: {{ deviceInfo.sn }} </div>
		<div class="console" @click="goSetting"></div>
		<div class="record" @click='record'>核验记录</div>
		<div class="title">
			<h1>{{ deviceInfo.organizationName }}
<!--        <br><span v-if="deviceInfo.ExpirationTime">({{ dayjs(deviceInfo.ExpirationTime).format('YYYY-MM-DD') }}到期,剩余{{dayDiff}})</span>-->
      </h1>
			<!-- <div v-if="!deviceInfo.organizationName" class="not-open">系统未激活，请联系管理员</div> -->
			<!-- <h1>妇幼身份核验系统</h1> -->
		</div>
		<div class="btn-group" v-if="hyjq">
			<div class="single-btn" @click='submitData(4)'>
				身份核验
			</div>
		</div>
		<div class="btn-group" v-else>
			<div class='left-box'>
        <img class='btn1' src="@/assets/images/index/btn4.png" alt="建册" @click='submitData(5)'>
        <img class='btn3' src="@/assets/images/index/btn3.png" alt="辅助生殖" @click='submitData(3)'>
			</div>
			<div class="right-box">
				<img class='btn2' src="@/assets/images/index/btn2.png" alt="住院分娩" @click='submitData(2)'>
        <img class='btn4' src="@/assets/images/index/btn1.png" alt="出生证明" @click='submitData(1)'>
			</div>
		</div>

		<div class="btn-group-top"></div>
		<van-popup v-model="show" round position="center" :close-on-click-overlay='false'>
			<div class="card-box">
				<div class="title">
					<h1>管理后台</h1>
				</div>
				<div class="input-box">
					<h1>{{ ciphertext || '请输入密码' }}</h1>
				</div>
				<van-number-keyboard theme="custom" extra-key="00" :show="true" close-button-text="确认" @input="onInput"
					@delete="onDelete" @close='submitDataKey'>
				</van-number-keyboard>
				<van-button hairline block type="danger" @click="goBack">关闭</van-button>
			</div>
		</van-popup>
<!--    <selectVerifyType
        ref="selectVerifyType"
        @change="selectVerifyTypeChange"
    ></selectVerifyType>-->
    <van-popup v-model="showverify" round :duration='duration' position="center">
      <div class="content-verify">
        <div class="title">{{ titleverify }}</div>
        <div class="list">
          <div class="item" :class="t.class" v-for='(t,i) in listverify' :key='i' @click='clickItem(t)'>
            <img class="img" :src="t.img">
            <p>{{ t.label }}</p>
          </div>
        </div>
      </div>
    </van-popup>
	</div>
</template>

<script>
import dayjs from "dayjs";
import watermark from 'watermark-package'
import AdminLogin from '@/components/AdminLogin'
import selectVerifyType from '@/components/selectVerifyType'
import {
  mapState,
  mapMutations,
  mapActions, mapGetters
} from 'vuex'
import {
	decryptByDES,encryptByDES
} from "@/utils/index";
import { getMachineId } from '@/api/index'
export default {
	data() {
		return {
			num: 0,
			list: [{
				label: '办理出生医学证明',
				value: '1',
			}, {
				label: '住院分娩',
				value: '2',
			}, {
				label: '辅助生殖服务',
				value: '3',
			}, {
				label: '身份核验',
				value: '4',
			}, {
        label: '建册',
        value: '5',
      }],
			show: false,
      showverify: false,
			form: {
				password: '',
			},

      titleverify: '请选择验证类型',
      duration: 0,
      listverify: [
        {
          label: '身份证核身',
          value: 'idcard',
          img: require('@/assets/images/verify-type/id-card.png'),
          class: 'green',
        },
        {
          label: '刷脸核身',
          value: 'face',
          img: require('@/assets/images/verify-type/face.png'),
          class: 'blue',
        },
      ],
		}
	},
	components: {
		AdminLogin,
    selectVerifyType
	},
	computed: {
		...mapState(['deviceInfo', 'desKey','expirationTimeState']),
    ...mapGetters(['isWenzhouAddress']),
    showRecord(){
      // console.log(this.deviceInfo.addressName !='温州市',this.deviceInfo)
      return this.deviceInfo.addressName !='温州市'
    },
		version() {
			return process.env.version
		},
		//密文
		ciphertext() {
			let len = this.form.password.length;
			let text = '';
			for (let i = 0; i < len; i++) {
				text += '*'
			}
			return text
		},
		hyjq(){
			return this.deviceInfo.sn=='SMIT3BVP22327000788'
			// return this.deviceInfo.sn=='SMIT3B2019C08000315'
		},
    dayDiff(){
      const time1= dayjs(this.deviceInfo.ExpirationTime)
      const time2=dayjs()
      return time1.diff(time2, 'day')
    }
	},
	mounted() {
    console.log(this.expirationTimeState,'this.expirationTimeState')
    if(this.deviceInfo.ExpirationTime&&(this.dayDiff<=7)&&!this.expirationTimeState){
      this.$notify({
        type: 'warning',
        message: `${dayjs(this.deviceInfo.ExpirationTime).format('YYYY-MM-DD')}到期,剩余${this.dayDiff}天`,
        duration: 10*1000,
      });
      this.setExpirationTimeState(true)
    }
		// this.show=true;
		setTimeout(()=>{
      this.getMachineId()
    },1000)
		// console.log('@@@@@:',encryptByDES(JSON.stringify({"zjlx":"01","zjhm":"52212319870510701X","xm":"徐业贵","sbbm":"XH001","timestamp":"1722938043"}), "xuhuichs"));
	},
	beforeDestroy() {
		if (!this.deviceInfo.organizationName) {
			watermark.removeWatermark()
		}
	},
	methods: {
    dayjs,
		...mapMutations(['setUserInfo', 'setDeviceInfo','setExpirationTimeState','clearUserInfo']),
		getMachineId() {
			console.log('this.deviceInfo.sn:',this.deviceInfo);
			if (this.deviceInfo.sn) {
				getMachineId({ "sn": this.deviceInfo.sn }).then(res => {
					if (res.success) {
						this.setDeviceInfo({
							...res.data, //设备sn号
						})
					} else {
						this.setwatermark()
					}
				}).catch(err => {
					this.setwatermark()
				})
			} else {
				console.log("@@@@@:重新获取机器配置")
				setTimeout(() => {
					this.getMachineId()
				}, 1000)
			}
		},
		goSetting() {
			if (this.num == 4) {
				this.show = true
				this.num = 0;
			} else {
				this.num++
			}
		},
		goBack() {
			this.close();
		},
		close() {
			this.form.password = '';
			this.show = false;
		},
		onInput(e) {
			this.form.password += e;
		},
		onDelete(e) {
			this.form.password = this.form.password.substring(0, this.form.password.length - 1)
		},
		submitDataKey() {
			if (this.form.password == '2023') {
				this.AdminLoginSuccess()
				this.close();
			} else {
				this.$toast('密码错误')
			}

		},
		AdminLoginSuccess() {

			this.$router.push({
				path: '/setting'
			})
		},
		//水印
		setwatermark() {
			watermark.setWaterMark(
				{
					w_texts: ['系统未激活，请联系管理员'],
					w_options: {
						w_width: 210,
						w_height: 70,
						w_top: '0px',
						w_left: '-10px',
						w_rotateDeg: 15,
						w_font: '1rem Vedana',
						w_color: '#fff',
						w_opacity: '0.6',
						w_zIndex: '100000',
					}
				}
			);
		},
		submitData(type) {
      this.clearUserInfo()
			let item = this.list.find((t) => {
				return t.value == type;
			})
			this.setUserInfo({
				businessType: item.value,
				businessTypeName: item.label,
			})
      if(this.isWenzhouAddress){
        // this.showverify=true
        this.$router.push({
          path: '/verify/choose-verify'
        })
      }else {
        this.$router.push({
        	path: '/verify/index'
        })
      }

		},
    /*clickItem(t) {
      this.setUserInfo({
        verifyType:t.value,
      })
      this.$router.push({
        path: '/verify/index'
      })
      this.showverify = false;
    },*/
    /*selectVerifyTypeChange(t){
      this.setUserInfo({
        verifyType:t.value,
      })
      this.$router.push({
      	path: '/verify/index'
      })
    },*/
		record() {
			this.$router.push({
				path: '/record/index'
			})
		},
		refresh() {
			window.localStorage.clear();
			window.sessionStorage.clear();
			window.location.reload(true)
			// window.location.href = `${window.location.origin}${window.location.pathname}${window.location.search}`;
		},
	}
};
</script>
<style lang="less" scoped>
.content {
	background: url('@/assets/images/index/bg.png');
	background-size: 100%;
	width: 100vw;
	height: 100vh;

	.record {
		position: absolute;
		right: 20px;
		top: 10px;
		// top: 200px;
		color: #fff;
		font-size: 14px;
	}

	.refresh {
		position: absolute;
		left: 0px;
		top: 10px;
		width: 150px;
		height: 30px;
		line-height: 1.4;
		color: #fff;
		font-size: 10px;
		padding-left: 10px;
		// background: #000;
	}

	.console {
		position: absolute;
		left: 150px;
		top: 0px;
		width: 150px;
		height: 40px;
		// background: #000;
	}

	.title {
		text-align: center;
		position: absolute;
		top: 40px;
		width: 90%;
		color: #fff;
		margin: 0 5%;

		h1 {
			font-size: 24px;
			font-weight: 500;
      span{
        color: #bc2222;
      }
		}

		.not-open {
			// border: 2px solid #f00;
			font-size: 24px;
			font-weight: 600;
			display: inline-block;
			padding: 0 30px;
			line-height: 1.7;
			border-radius: 5px;
			color: rgb(239 40 40);
			// box-shadow: 0 4px 20px #0055c1;
			// background: #ffffff;
			transform: rotate(45deg);
			position: relative;
			top: 230px;
		}
	}

	.btn-group-top {
		position: absolute;
		bottom: 100px;
		left: 0px;
		background: #fff;
		height: 80px;
		width: 100%;
		border-radius: 100%;
		z-index: 0;
	}

	.btn-group {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 140px;
		background: #fff;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		align-items: center;
		justify-content: center;
		z-index: 1;
		.single-btn{
			width: 300px;
			margin: 0 auto;
			background: linear-gradient(to bottom, #00adff, #5050db);
			height: 100px;
			line-height: 100px;
			font-size: 36px;
			letter-spacing: 2px;
			color: #fff;
			border-radius: 20px;
			text-align: center;
		}
		// border-top-right-radius: 10px;
		// border-top-left-radius: 10px;
		.left-box {
			margin-right: 5px;
      display: flex;
      flex-direction: column;
      margin-top: -20px;
		}

		.right-box {
			width: 150px;
			margin-left: 10px;
      margin-top: -20px;
      display: flex;
      flex-direction: column;
		}

		img {
			width: 150px;
			height: 64px;
		}

		.btn1 {
			//height: 140px;
      margin-bottom: 5px;
		}

		.btn2 {
			margin-bottom: 5px;
		}

		.btn3,.btn4 {
			margin-top: 5px;
		}
	}
}
.content-verify {
  padding: 20px 0;
  width: 300px;

  .title {
    text-align: center;
    font-size: 24px;
    font-weight: bolder;
    color: #000000;
    margin-top: -30px;
  }

  .list {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    .item {
      width: 200px;
      height: 60px;
      margin-bottom: 10px;
      border: 5px solid #fff;
      border-radius: 13px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      padding: 10px;
      display: flex;
      color: #000;
      align-self: center;
      align-content: center;
      justify-content: center;
      &.blue {
        background: linear-gradient(180.00deg, rgba(89, 163, 250, 1.00) 12.476%, rgba(34, 111, 255, 1.00) 100%);
        border-color: rgb(167, 211, 255);
      }

      &.green {
        background: linear-gradient(180.00deg, rgba(44, 216, 120, 1.00) 12.476%, rgba(56, 176, 34, 1.00) 100%);
        border-color: rgb(163, 249, 200);
      }
      img{width: 50px;height: 50px;margin-right: 10px;align-self: center;}
      p {
        align-self: center;
        font-size: 20px;
        color: #fff;
        text-align: center;
      }
    }
  }

}
.card-box {
	width: 300px;
	padding: 15px;

	.title {
		text-align: center;
		margin-bottom: 10px;
		position: inherit;

		h1 {
			font-size: 18px;
			color: #000932;
		}
	}

	.input-box {
		border: 1px solid rgb(196, 196, 196);
		border-radius: 20px;
		margin-bottom: 20px;
		height: 40px;
		padding: 0 20px;

		h1 {
			color: grey;
			font-size: 18px;
			margin: 0;
			line-height: 40px;
		}

		span {
			font-size: 18px;
		}
	}

	.shortcut-list {
		margin-bottom: 20px;
		margin-left: -20px;

		.item {
			border: 1px solid #fff;
			border-radius: 20px;
			color: #000;
			width: 171px;
			height: 70px;
			margin-left: 20px;
		}
	}

}

/deep/.van-number-keyboard {
	position: inherit;
	margin-bottom: 20px;
}
</style>
